"use client"
import React, { useState, useEffect } from "react"
import { Moon, Sun } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useTheme } from "next-themes"

/**
 * 主题切换组件
 */
const ThemeToggle = () => {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()

  /**
   * 切换主题
   */
  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light")
  }

  // 确保组件在客户端渲染后才显示，避免 hydration 不一致
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return <div className="w-10 h-10"></div>

  return (
    <Button variant="ghost" size="icon" onClick={toggleTheme} className="w-10 h-10 rounded-full" aria-label="切换主题">
      {theme === "light" ? (
        <Sun className="w-5 h-5 text-gray-700 dark:text-gray-300" />
      ) : (
        <Moon className="w-5 h-5 text-gray-700 dark:text-gray-300" />
      )}
    </Button>
  )
}

export default ThemeToggle
